<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" 
src="jquery.js"></script>
<style type="text/css">
.clear{clear:both; height:0px; font-size:0px; line-height:0px;}
.showyearbox{font-size:12px; color: #333333; font-family:Arial, Helvetica, sans-serif;
position:absolute; left:0px; top:25px; z-index:88; background-color: #F4FDFF; border:1px #8A89A9 solid; width:365px; display:none; padding:5px; 
 -moz-box-shadow: 3px 3px 4px #CCCCCC;   
 -webkit-box-shadow: 3px 3px 4px #CCCCCC;   
box-shadow: 3px 3px 4px #CCCCCC;   
/* For IE 8 */   
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";   
/* For IE 5.5 - 7 */   
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');   
}
.showyearbox ul { padding:0px; margin:0px;}
.showyearbox li { padding:0px; margin:0px; line-height:180%;list-style-type:none;}
.showyearbox li{ float:left;cursor:pointer; width:50px; padding-left:10px; height:23px; line-height:23px;}
.showyearbox .tit{ font-size:12px; color: #0066CC; font-weight:bold; padding-left:10px;}
</style>
<script type="text/javascript"> 
$(document).ready(function()
{
	showyearbox(".date_input");
});
//年月(单选)
function showyearbox(inputname)
{
	$(inputname).click(function(){
		var input=$(this);
		$(input).parent("div").before("<div class=\"menu_bg_layer\"></div>");
		$(".menu_bg_layer").height($(document).height());
		$(".menu_bg_layer").css({ width: $(document).width(), position: "absolute", left: "0", top: "0" , "z-index": "0"});
		$(input).parent("div").css("position","relative");
		
		var myDate = new Date();
		var y=myDate.getFullYear();
		var ymin=y-65;
		htm="<div class=\"showyearbox yearlist\">";		
		htm+="<div class=\"tit\">选择年份>></div>";
		htm+="<ul>";
		for (i=y;i>=ymin;i--)
		{
		htm+="<li title=\""+i+"年\">"+i+"年</li>";
		}
		htm+="<div class=\"clear\"></div>";
		htm+="</ul>";
		htm+="</div>";
		//
		htm+="<div class=\"showyearbox monthlist\">";
		htm+="<div class=\"tit\">选择月份>></div>";
		htm+="<ul>";
		for (i=1;i<=12;i++)
		{
		htm+="<li title=\""+i+"月\">"+i+"月</li>";
		}
		htm+="<div class=\"clear\"></div>";
		htm+="</ul>";
		htm+="</div>";
		$(input).blur();
		if ($(input).parent("div").find(".showyearbox").html())
		{
			$(input).parent("div").children(".showyearbox.yearlist").slideToggle("fast");
		}
		else
		{
			$(input).parent("div").append(htm);
			$(input).parent("div").children(".showyearbox.yearlist").slideToggle("fast");
		}
		//
		$(input).parent("div").children(".yearlist").find("li").unbind("click").click(function()
		{
			$(input).val($(this).attr("title"));
			$(input).parent("div").children(".yearlist").hide();
			$(input).parent("div").children(".monthlist").show();
			$(input).parent("div").children(".monthlist").find("li").unbind("click").click(function()
			{
				$(input).val($(input).val()+$(this).attr("title"));
				$(".menu_bg_layer").hide();
				$(input).parent("div").css("position","");
				$(input).parent("div").find(".showyearbox").hide();
			});	
		});	
		//
		$(".showyearbox>ul>li").hover(
		function()
		{
		$(this).css("background-color","#DAECF5");
		$(this).css("color","#ff0000");
		},
		function()
		{
		$(this).css("background-color","");
		$(this).css("color","");
		}
		);
		//
		$(".menu_bg_layer").click(function(){
					$(".menu_bg_layer").hide();
					$(input).parent("div").css("position","");
					$(input).parent("div").find(".showyearbox").hide();			
		});
	});
}
</script>
</head>
 
<body>
<div>
<input name="endtime" type="text" class="date_input" id="endtime" maxlength="18"    value=""/>
</div>
</body>
</html>